﻿<MCard Class="overflow-hidden">
    <MAppBar
        Absolute
        Color="#6A76AB"
        Dark
        ShrinkOnScroll
        Prominent
        Src="https://picsum.photos/1920/1080?random"
        FadeImgOnScroll
        ScrollTarget="#scrolling-techniques-4">
        <ImgContent>
            <MImage
                @attributes="@context"
                Gradient="to top right, rgba(100,115,201,.7), rgba(25,32,72,.7)">
            </MImage>
        </ImgContent>

        <ChildContent>
            <MAppBarNavIcon></MAppBarNavIcon>

            <MToolbarTitle>Title</MToolbarTitle>

            <MSpacer></MSpacer>

            <MButton Icon>
                <MIcon>mdi-magnify</MIcon>
            </MButton>

            <MButton Icon>
                <MIcon>mdi-heart</MIcon>
            </MButton>

            <MMenu
                Bottom
                Left>
                <ActivatorContent>
                    <MButton
                        Icon
                        Color="yellow"
                        @attributes="@context.Attrs">
                        <MIcon>mdi-dots-vertical</MIcon>
                    </MButton>
                </ActivatorContent>

                <ChildContent>
                    <MList>
                        @foreach (var item in items)
                        {
                            <MListItem>
                                <MListItemTitle>@item</MListItemTitle>
                            </MListItem>
                        }
                    </MList>
                </ChildContent>
            </MMenu>
        </ChildContent>

        <ExtensionContent>
            <MTabs AlignWithTitle>
                <MTab>Tab 1</MTab>
                <MTab>Tab 2</MTab>
                <MTab>Tab 3</MTab>
            </MTabs>
        </ExtensionContent>
    </MAppBar>
    <MSheet
        id="scrolling-techniques-4"
        Class="overflow-y-auto"
        MaxHeight="600">
        <MContainer Style="height: 1000px;"></MContainer>
    </MSheet>
</MCard>

@code {

    readonly List<string> items = new()
    {
        "Click Me",
        "Click Me",
        "Click Me",
        "Click Me 2",
    };

}